<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据代理机制</title>
</head>

<body>
    <!-- 
        1. 什么是数据代理机制
            通过访问 代理对象的属性 来间接访问 目标对象的属性
            数据代理机制的实现需要依靠： Object.defineProperty()方法
        2. ES6新特性：
            在对象中的函数，:function是可以省略的
    -->


    <!-- vue程序 -->
    <script>

        //目标对象
        let target = {
            name: "张三"
        }

        //代理对象
        let proxy = {}

        // 如果要实现数据代理机制的话，就需要给proxy新增一个name属性。
        // 注意：代理对象新增的这个属性的名字 和 目标对象的属性名一致。
        Object.defineProperty(proxy, 'name', {
            get() {
                return target.name
            },
            set(val) {
                target.name = val
            }
        })


        // let target = {
        //     name: '张三'
        // }

        // let proxy = new Vue({
        //     el: '#app',
        //     data: target
        // })


    </script>
</body>

</html>